<template>
  <el-card
    :class="['common-card', cardClass]"
    :shadow="shadow"
    :body-style="bodyStyle"
  >
    <template #header v-if="showHeader">
      <div class="card-header">
        <span class="card-title">{{ $t(titleKey) }}</span>
        <slot name="header-extra"></slot>
      </div>
    </template>
    
    <div class="card-content">
      <slot></slot>
    </div>
    
    <template #footer v-if="showFooter">
      <div class="card-footer">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-card>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

defineProps({
  titleKey: {
    type: String,
    default: ''
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  shadow: {
    type: String,
    default: 'hover'
  },
  cardClass: {
    type: String,
    default: ''
  },
  bodyStyle: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped>
.common-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.card-content {
  min-height: 100px;
}

.card-footer {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid var(--el-border-color-light);
}
</style>